<template>
  <div class="m-most-expectd">
    <h1>近期最受欢迎</h1>
    <div id="m-most-expected">
      <ul>
        <li
          v-for="item in dataList"
          :key="item.id"
        >
          <div>
            <img :src="item.img | wh('180.270')" width="85" height="115" alt="">
          </div>
          <p>{{item.nm}}</p>
          <p>{{item.wish}}想看</p>
          <p>{{item.comingTitle}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'
import { get } from '@u/http'
export default {
  data() {
    return {
      dataList: []
    }
  },

  created() {
    this.limit = 10
    this.offset = 0
  },

  methods: {
    async loadData() {
      let result = await get({
        url: `/ajax/mostExpected?ci=1&limit=${this.limit}&offset=${this.offset}&token`
      })

      this.dataList = [
        ...this.dataList,
        ...result.data.coming
      ]

      this.offset += this.limit
    },

    bscroll() {
      let bs = new BScroll('#m-most-expected', {
        scrollX: true
      })

      bs.on('scrollEnd', async () => {
        // 判断是否触底
        if (bs.x <= bs.maxScrollX) {
          await this.loadData()
          bs.refresh()
        }
      })
    }
  },

  async mounted() {
    // 多次await
    await this.loadData()

    // 这个DOM操作是拿不到渲染的数据的，DOM渲染是异步的
    // console.log(document.querySelector('#m-most-expected').innerHTML)

    // BScroll 定义
    // setTimeout(() => {
    //   }, 0)
    // await this.$nextTick()
    this.$nextTick(() => {
      this.bscroll()
    })
  },
}
</script>

<style lang='stylus' scoped>
@import '~@a/stylus/ellipsis.styl'
@import '~@a/stylus/border.styl'
div.m-most-expectd
  padding-left .15rem
  h1
    height .4rem
    line-height .4rem
    font-weight normal
    font-size .16rem
  > div
    overflow hidden
    ul
      display flex
      width max-content
      li
        width .95rem
        >p:nth-of-type(1)
          line-height .24rem

        >p:nth-of-type(2), >p:nth-of-type(3)
          color: #999
          ellipsis_ml()
</style>